<template>
  <div>
    <div class="flex bg-white">
      <LayoutBreadcrumb class="grow" />
    </div>

    <div class="px-2 py-2">
      <a-row :gutter="8">
        <a-col :span="8" style="height: calc(50vh - 80px)">
          <div class="bg-blue-200 h-16 pl-4 pt-2 text-base font-semibold">{{ project.name }} </div>
          <div class="bg-white my-2 py-4">
            <ul class="flex justify-center space-x-2 mb-0">
              <li class="w-10 h-10 text-center leading-8 rounded-full bg-green-500">{{
                statis.dtuCount
              }}</li>
              <li class="w-10 h-10 text-center leading-8 rounded-full bg-blue-500">{{
                statis.gatherDeviceCount
              }}</li>
              <li class="w-10 h-10 text-center leading-8 rounded-full bg-yellow-200">{{
                statis.sensorCount
              }}</li>
              <!-- <li class="w-10 h-10 text-center leading-8 rounded-full bg-yellow-500">xx</li> -->
              <!-- <li class="w-10 h-10 text-center leading-8 rounded-full bg-red-500">xx</li> -->
            </ul>
            <ul class="flex mt-1 justify-center space-x-2 block border-b-1 pb-2 mb-0 text-xs">
              <li class="w-10 text-center">DTU</li>
              <li class="w-10 text-center">采集器</li>
              <li class="w-10 text-center">传感器</li>
              <!-- <li class="w-10 text-center">xx</li> -->
              <!-- <li class="w-10 text-center">xx</li> -->
            </ul>
            <p class="mb-0 text-center">{{ project.lon }}, {{ project.lat }}</p>
          </div>

          <a-descriptions class="bg-white mt-2 p-2 pb-6" :column="2" title="项目信息">
            <a-descriptions-item label="名称">{{ project.name }}</a-descriptions-item>
            <a-descriptions-item label="电话">{{ project.tel }}</a-descriptions-item>
            <a-descriptions-item label="创建与">{{
              project.createDate ? project.createDate.slice(0, 10) : ''
            }}</a-descriptions-item>
            <a-descriptions-item label="备注">{{ project.remark }}</a-descriptions-item>
            <a-descriptions-item label="地址">
              {{ project.address }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>

        <a-col :span="16">
          <div class="bg-white col-span-2">
            <this-carousel :covers="covers" v-if="covers.length" />
          </div>
        </a-col>
      </a-row>

      <div class="bg-white -mt-2" style="height: calc(50vh - 30px)">
        <this-tabs />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { PlusOutlined } from '@ant-design/icons-vue';
import thisCarousel from './carousel.vue';
import thisTabs from './tabs/index.vue';
import { useRoute } from 'vue-router';
import { defHttp, HOST } from '/@/utils/http/axios';

export default defineComponent({
  components: { LayoutBreadcrumb, PlusOutlined, thisCarousel, thisTabs },

  setup() {
    const route = useRoute();
    const project = ref({});
    const statis = ref({});
    const covers = ref([]);

    function getProject() {
      const id = route.params.id;
      defHttp.get({ url: `/Project/get-by-id?id=${id}` }).then((res) => {
        project.value = res.data;
        if (res.data.logo) {
          let arr = res.data.logo.split(',').map((item) => HOST + '/szfiles' + item);
          covers.value.push(...arr);
        }
      });
      defHttp.get({ url: '/project/get-statistics', params: { projectId: id } }).then((res) => {
        statis.value = res.data;
      });
    }

    getProject();

    return {
      project,
      covers,
      statis,
    };
  },
});
</script>
